<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>{{ 'addon.mod_data.search' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-item lines="full" class="ion-text-wrap">
        <ion-toggle [(ngModel)]="search.searchingAdvanced">
            <p class="item-heading">{{ 'addon.mod_data.advancedsearch' | translate }}</p>
        </ion-toggle>
    </ion-item>
    <form (ngSubmit)="searchEntries($event)" [formGroup]="searchForm" #searchFormEl>
        <ion-list class="ion-no-margin">
            <ion-item [hidden]="search.searchingAdvanced">
                <ion-input type="text" [ariaLabel]="'addon.mod_data.search' | translate"
                    placeholder="{{ 'addon.mod_data.search' | translate}}" name="text" formControlName="text" />
            </ion-item>
            <ion-item class="ion-text-wrap">
                <ion-select labelPlacement="stacked" interface="action-sheet" name="sortBy" formControlName="sortBy"
                    [placeholder]="'core.sortby' | translate" [cancelText]="'core.cancel' | translate"
                    [interfaceOptions]="{header: 'core.sortby' | translate}" [label]="'core.sortby' | translate">
                    @if (fieldsArray.length) {
                        <optgroup label="{{ 'addon.mod_data.fields' | translate }}">
                            <ion-select-option *ngFor="let field of fieldsArray" [value]="field.id">{{field.name}}</ion-select-option>
                        </optgroup>
                    }
                    <optgroup label="{{ 'addon.mod_data.other' | translate }}">
                        <ion-select-option value="0">{{ 'addon.mod_data.timeadded' | translate }}</ion-select-option>
                        <ion-select-option value="-4">{{ 'addon.mod_data.timemodified' | translate }}</ion-select-option>
                        <ion-select-option value="-1">{{ 'addon.mod_data.authorfirstname' | translate }}</ion-select-option>
                        <ion-select-option value="-2">{{ 'addon.mod_data.authorlastname' | translate }}</ion-select-option>
                        @if (database.approval) {
                            <ion-select-option value="-3">
                                {{ 'addon.mod_data.approved' | translate }}
                            </ion-select-option>
                        }
                    </optgroup>
                </ion-select>
            </ion-item>
            <ion-list>
                <ion-radio-group name="sortDirection" formControlName="sortDirection">
                    <ion-item>
                        <ion-radio value="ASC" labelPlacement="end" justify="start">
                            {{ 'addon.mod_data.ascending' | translate }}
                        </ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-radio value="DESC" labelPlacement="end" justify="start">
                            {{'addon.mod_data.descending' | translate}}
                        </ion-radio>
                    </ion-item>
                </ion-radio-group>
            </ion-list>
            @if (extraImports) {
                <div class="ion-padding addon-data-advanced-search" [hidden]="!advancedSearch || !search.searchingAdvanced">
                    <core-compile-html [text]="advancedSearch" [jsData]="jsData" [extraImports]="extraImports" />
                </div>
            }
        </ion-list>
        <div class="ion-padding">
            <ion-button expand="block" type="submit">
                <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true" />
                {{ 'addon.mod_data.search' | translate }}
            </ion-button>
        </div>
    </form>
</ion-content>
